设为首页收藏本站
开启辅助访问

Vue报错总结

 您所在的位置：网站首页 › vue invoke报错 › Vue报错总结

Vue报错总结

2023-07-23 08:54| 来源: 网络整理| 查看: 265

Vue框架规则类错误(感谢彭导提供的资料) 报错: Vue is not defined

错误提示: Vue没定义啊

有问题代码: new Vue({ el:'#app' }) 复制代码 报错图示:

报错4.png

分析 Vue全局变量哪里来的啊? 是不是引入vue.js才暴露在全局的啊, 就跟$变量也是引入jQuery.js才有的 所以证明你没有引入Vue.js 复制代码 解决: 去引入vue.js源码到你的页面中即可 复制代码 问题: 不解析内容

错误描述: 运行后, 出现了双大括号, 不解析了

报错提示

报错2.png

分析: 1. 先看看浏览器是否有报错 有报错提示根据提示解决问题 2. 可能把标签内容都写在了 外面去了 复制代码 解决

把内容都写到div#app里面来, 因为vue指定了以#app为根标签, 按照你写的模板结构, vue会创建一套虚拟DOM解析真正的内容和标签, 然后替换到这个标签上来, 写外面你让vue咋解析?

报错: Do not mount Vue to

错误描述: 不能使用html或body作为vue的模板根标签

有问题代码: new Vue({ el:'#app' }) 复制代码 报错图示:

2.png

分析 Vue框架不允许把html或者body作为挂载的根元素 复制代码 解决:

把挂载根元素换成普通元素即可

复制代码 报错: Property or method 'xxx' is not defined on the instance

错误描述: 属性或方法没定义

3.png

有问题代码: {{name}} const vm = new Vue({ el: '#app', computed:{} data: {}, methods: {} }) 复制代码 分析

在vue组件实例的模板中使用到的属性值或者方法必须要在实例的配置项中定义好才可以使用

解决

根据错误提示的内容，去组件实例选项中查看是否未定义该属性，查找范围包括data,computed,methods,props

在data: {} 里面定义name变量

报错: method 'name' has already been defined as a 报错: the data property 'name' is already defined

错误描述: xxx already defined 就是已经定义过了的提示, 肯定重复定义了变量名哦

有问题代码: const vm = new Vue({ el: '#app', data: { name: 'cp' }, props: { name: { type: String } }, computed: { name() {} }, methods: { name() { console.log(`cp`) } } }) 复制代码 报错图示:

4.png

分析

Vue框架不允许data/props/computed/methods中任意两项出现重复的属性名，在初始化配置时会进行名称检测

解决

根据错误提示找到哪里发生了重复，找到重复属性名更改为不重复即可

报错: Duplicate keys detected

错误描述: 发现重复的key

有问题代码 {{item.name}} const vm = new Vue({ el: '#app', data: { // 这里有重复id list: [ { id: 1, name: 'react' }, { id: 2, name: 'vue' }, { id: 1, name: 'angular' } ] } }) 复制代码 报错图示:

5.png

分析

为保证列表的高效更新 vue框架在我们使用v-for指令的时候要求为每一项绑定一个唯一的key属性，注意key必须是唯一不可重复的 代码中的存在重复的id 所以会报错

解决

每次给key绑定值时确保是唯一的值

{{item.name}} const vm = new Vue({ el: '#app', data: { // 这里有重复id list: [ { id: 1, name: 'react' }, { id: 2, name: 'vue' }, { id: 3, name: 'angular' } ] } }) 复制代码 报错: the data option should be a function

错误描述: 说你的data选项必须是一个方法

有问题代码: Vue.component('add-component', { // 错误！！ data: { name: 'cp' } }) const vm = new Vue({ el: '#app' }) 复制代码 报错图示:

6.png

分析

上面申明的组件add-component上面的data属性直接配置了一个对象，这在vue的组件系统中是不允许的，因为组件的核心使用场景是复用，data如果直接赋值一个对象，那么多个重复的组件会共用一套数据，一个组件进行数据更改所有组件都会受到影响，违背了组件的功能独立性

解决:

任何一个组件的data都应该申明为一个函数，函数中返回一个对象，这个全新的对象作为组件的依赖数据

Vue.component('add-component', { // 正确 data(){ return { name:'cp' } } }) const vm = new Vue({ el: '#app' }) 复制代码 报错: Component template should contain exactly one root element

错误描述: 组件模板应该只包含一个根元素标签

有问题代码: Vue.component('add-component', { template: `

` }) new Vue({ el: '#app' }) 复制代码 报错图示:

7.png

分析:

vue组件的的template选项中只能拥有一个根元素 原因是因为一是为了做组件样式隔离，二是为了渲染时存放当前的组件对应的vnode，所以只能有一个根元素 这在vue3.0中会得到改善

解决:

只写一个根元素

Vue.component('add-component', { template: ` ` }) new Vue({ el: '#app' }) 复制代码 报错: do not use build-in or reserved HTML elements as

错误描述: 不能将内置或保留的html元素用作组件

有问题代码 // 错误！！ Vue.component('header', { data(){ return {} } }) const vm = new Vue({ el: '#app' }) 复制代码 报错图示:

8.png

分析

Vue框架对于组件的命名规则有一定限制，不允许和HTML内置标签发生名称重复，上面组件的名称header和HTML内置标签中的header标签重复，关于vue中的组件命名希望大家严格遵守

解决

将组件名称替换成规范的命名规则即可

报错: Unknown custom element

错误描述: 不知道自定义的标签, 你注册了吗?

有问题代码 Vue.component('father-component', { template:` 我是父组件 ` }) const vm = new Vue({ el: '#app', components:{ 'son-component':{ template:` 我是子组件 ` } } }) 复制代码 报错图示:

9.png

分析

组件 并没有在父组件 中注册，所以并不能正常使用，大家一定要记着，全局组件在每一个vue实例的模板中都能正常使用，而局部注册的组件只有在父组件的components选项中注册时候才能使用

解决

在父组件的components中注册一下组件即可

Vue.component('father-component', { template:` 我是父组件 `, // 注册局部组件！！！ components:{ 'son-component':{ template:` 我是子组件 ` } } }) const vm = new Vue({ el: '#app' }) 复制代码 总结: 谁用谁注册哦~全局的不用注册, 直接用 报错: Failed to mount component: template or render function not defined

错误描述: 无法装载组件：未定义模板或呈现函数

有问题代码: Vue.component('add-component', { data() { return {} } }) new Vue({ el: '#app' }) 复制代码 报错图示:

10.png

分析

尝试渲染组件，但是组件中既没有tempalte选项又没有render函数，因为vue组件的渲染最终是要执行render函数的，如果render函数存在就以render函数为准，如果render函数不存在，则会把template选项编译成为render函数再执行 所以这俩个需要申明其中的一个

解决

申明template选项或者申明render函数

Vue.component('add-component', { template:` this is add-component `, data() { return {} } }) new Vue({ el: '#app' }) 复制代码 报错: Avoid mutating a prop directly since the value will be overwritten

错误描述: 避免直接改变属性，因为值将被覆盖

有问题代码 Vue.component('add-component', { props: { title: { type: String } }, template: ` {{title}} 修改数据 `, methods:{ change(){ // 尝试直接修改父组件传过来的数据 this.title = 'new title' } } }) new Vue({ el: '#app' }) 复制代码 报错图示:

11.png

分析:

上面的代码中，title数据来源于父组件，在子组件按钮点击时尝试直接修改title数据，基于vue单向数据流的要求，我们不能反向子组件直接修改父组件的数据 所以会报错

解决:

可以通过事件传递的方式，通过调用父组件的一个方法进行修改title数据，这样的话就符合父组件修改自己数据的要求，或者我们可以把props中的title赋值给子组件data中的一个新的值，让它成为子组件自己的数据，这样的话就可以子组件自己修改了

Vue.component('add-component', { props: { title: { type: String } }, data() { return { childTitle: this.title } }, template: ` {{childTitle}} 修改数据 `, methods: { change() { this.childTitle = 'new title' } } }) new Vue({ el: '#app' }) 复制代码 报错: Computed property "xxx" was assigned to but it has no setter

错误描述: 计算属性想被赋值, 但是它没有setter方法

有问题代码 new Vue({ el: "#app", computed: { isAll(){ return true; } } }) 复制代码 报错图示:

计算属性需要set和get.png

分析:

发现v-model会把标签的value值/状态值绑定给v-model指定的变量, 而变量又是给计算属性, 计算属性默认只返回值, 不是给它赋值

解决:

修改computed里的代码即可, 给计算属性一个set的机会, 但是千万不要在这里给计算 属性赋值, 会引起递归的

computed: { isAll: { set(val) { // 设置isAll的值的时候触发此方法, 传入要设置的值 // val是全选框的true/false的值 this.arr.map(obj => { obj['checked'] = val; }) }, get() { return this.arr.every(obj => obj['checked'] == true); } } } 复制代码 报错: avoid using JavaScript unary operator as property name

错误描述: 避免使用JavaScript一元运算符作为属性名

有问题代码 {{ obj.id }} {{ obj.name }} {{ obj.time }} 删除 复制代码 报错图示:

image-20210119200954791.png

分析: 报错的意思是说你使用了一元运算符作为属性名, 而且报错里一直说delete有问题 后来百度一查发现delete是个关键字 所以以后不要用delete作为变量名/方法名哦 复制代码

解决:

把delete换个名字使用和定义即可

{{ obj.id }} {{ obj.name }} {{ obj.time }} 删除 methods: { delBtn(index){ // 2. 给删除按钮绑定点击事件 - 传递过来对应绑定的index索引值 // 删除数组里对应的元素, vue会自动更新页面 this.list.splice(index, 1); } } 复制代码 报错: Templates should only be responseible for mapping the state to the UI

错误描述: 模板应该只负责将状态映射到UI

有问题代码 {{item}} // 3. 实例化vue对象 (把视图配置进来让vue解析) new Vue({ el: "#app", // 指向视图的名字(选择器/dom标签) data: { // vue世界用到的变量 arr: ["春天", "夏天", "秋天", "冬天"] // 变量名叫arr, 值是一个数组4个元素 } }) // 哇哦, 真香 复制代码 报错图示:

image-20210121230017265.png

分析: 报错说只负责把状态更新到UI, 而且下面波浪线画的是script标签, 说明你script不是模板代码啊 Vue会把#app指定标签内的代码认为是模板代码, 怎么把script也认为了? 看代码结构, 发现把script写#app标签里了我的天啊... 复制代码

解决: 把script标签等拿出来啊

拼写类错误 报错: Error in mounted hook: "TypeError: xxx is not a function"

错误描述: xxx不是一个方法

有问题代码: const vm = new Vue({ el: '#app', data: { name: "cp" }, // 拼写类错误 method:{ add(){} }, mounted(){ this.add() } }) 复制代码 报错图示:

12.png

分析

!> 此类错误并不会直接告诉你是拼写错了，如果你发现貌似根据错误提示怎么找都找不到，那么试着检查下，vue的配置项是不是拼写错了

解决: methods 配置项 其他错误 报错: this.getOptions is not a function

错误描述: this.getOptions不是一个方法

代码环境: @vue/cli - 内部是webpack4.x版本, 而less-loader我们下的8.x版

报错图示:

image-20210228221359031.png

分析

这也不是我写的代码啊, 再根据别的提示说我less相关有问题, 去百度下蓝色指向的这句关键字吧

解决

百度上很多人遇到了, 让我下载less-loader除了8以外的版本

具体为啥less-loader8.x版本就不行了呢? 因为webpack4.x配置引入less-loader方式 和less-loader8不同, 具体参考这个文档

segmentfault.com/a/119000003…

报错: this dependency was not found

错误描述: 找不到此依赖项

有问题代码: import "@api/hmmm/questions" 复制代码 报错图示:

image-20210228221103394.png

分析

说找不到@api/hmmm/questions模块, 但是这是我们自己建立的, 为啥让我们下载, 应该是路径写错了导致未找到

解决:

@代表的是src文件夹, 你想访问src文件夹下的api文件夹, 正确写法 @/api

import "@/api/hmmm/questions" 复制代码 报错: spawn cmd ENOENT

错误描述: spawn命令无法运行

报错图示:

spawn.bmp

分析

改端口号出现这个问题, 应该是电脑的命令未找到, 通过百度得知, 需要给环境变量配置system32下的命令

解决:

打开电脑的环境变量, 添加system32 或者你没有%SystemRoot%变量就换成这个填进去(最好挪到环境变量最上面) C:\Windows\System32

image-20210319180104779.png

报错: Invalild options in vue.config.js

错误描述: 在vue配置文件中非法的选项

报错图示:

vue配置错误.bmp

分析

看报错提示红色, 在vue.config.js中 devServe不被允许, 知道devServer才是正确的选项对吧?

解决:

把devServe 改成 devServer即可



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3